<template>
  <div>
    <div  class="content">
      <!--导航条-->
      <div class="tag">
        <div class="tag_zhong">
          <div @click="style(1)" v-bind:class="style1">
            全部
          </div>
          <div @click="style(2)" v-bind:class="style2">
            单选题
          </div>
          <div @click="style(3)" v-bind:class="style3">
            多选题
          </div>
          <div @click="style(4)" v-bind:class="style4">
            判断题
          </div>
          <div @click="style(5)" v-bind:class="style5">
            填空题
          </div>
        </div>
      </div>
      <!--全部题-->
      <div v-if="show==1" class="answer_three">
        <div class="answer_three_header">
          共 {{radio.length+check.length+judge.length+fill.length}} 道题 <span>(其中单选题{{radio.length}}道，多选题{{check.length}}道，判断题{{judge.length}}道, 填空题{{fill.length}}道)</span>
        </div>

        <!--单选题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">单选题</span>
          </div>
          <div v-for="(radios, index) in radio" class="tkj">
            <div class="subject">
              {{index+1}}. {{radios.content}}
            </div>
            <ul>
              <li v-for="radioss in radios.option">
                {{radioss}}
              </li>
              <li>
                您的答案：<span style="color: #F94B5C">{{radios.userAnswer}}</span> 正确答案：<span style="color: #3B50A1">{{radios.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{radios.answerAnalysis}}</span>
            </div>
            <div class="del" @click="del(radios.id,index,1)">
              删除
            </div>
          </div>
        </div>
        <!--多选题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">多选题</span>
          </div>
          <div v-for="(checks, index) in check" class="tkj">
            <div class="subject">
              {{radio.length+(index+1) }}. {{checks.content}}
            </div>
            <ul>
              <li v-for="checkss in checks.option">
                {{checkss}}
              </li>
              <li>
                您的答案：<span style="color: #F94B5C">{{checks.userAnswer}}</span> 正确答案：<span style="color: #3B50A1">{{checks.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{checks.answerAnalysis}}</span>
            </div>
            <div class="del" @click="del(checks.id,index,2)">
              删除
            </div>
          </div>
        </div>
        <!--判断题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">判断题</span>
          </div>
          <div v-for="(judges, index) in judge" class="tkj">
            <div class="subject">
              {{(check.length+radio.length)+(index+1) }}. {{judges.content}}
            </div>
            <ul>
              <li v-for="judgess in judges.option">
                {{judgess}}
              </li>
              <li>
                您的答案：<span style="color: #F94B5C">{{judges.userAnswer}}</span> 正确答案：<span style="color: #3B50A1">{{judges.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{judges.answerAnalysis}}</span>
            </div>
            <div class="del" @click="del(judges.id,index,3)">
              删除
            </div>
          </div>
        </div>
        <!--填空题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">填空题</span>
          </div>
          <div v-for="(filles, index) in fill" class="tkj">
            <div class="subject">
              {{(check.length+radio.length+judge.length)+(index+1) }}. {{filles.content}}
            </div>
            <ul>

              <li>
                您的答案：<span style="color: #F94B5C">{{filles.userAnswer}}</span> 正确答案：<span style="color: #3B50A1">{{filles.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{filles.answerAnalysis}}</span>
            </div>
            <div class="del" @click="del(filles.id,index,5)">
              删除
            </div>
          </div>
        </div>


      </div>
      <!--单选题-->
      <div v-if="show==2" class="answer_three">
        <div class="answer_three_header">
          共 {{radio.length+check.length+judge.length+fill.length}} 道题 <span>(其中单选题{{radio.length}}道，多选题{{check.length}}道，判断题{{judge.length}}道, 填空题{{fill.length}}道)</span>
        </div>

        <!--单选题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">单选题</span>
          </div>
          <div v-for="(radios, index) in radio" class="tkj">
            <div class="subject">
              {{index+1}}. {{radios.content}}
            </div>
            <ul>
              <li v-for="radioss in radios.option">
                {{radioss}}
              </li>
              <li>
                您的答案：<span style="color: #F94B5C">{{radios.userAnswer}}</span> 正确答案：<span style="color: #3B50A1">{{radios.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{radios.answerAnalysis}}</span>
            </div>
            <div class="del" @click="del(radios.id,index,1)">
              删除
            </div>
          </div>
        </div>

      </div>
      <!--多选题-->
      <div v-if="show==3" class="answer_three">
        <div class="answer_three_header">
          共 {{radio.length+check.length+judge.length+fill.length}} 道题 <span>(其中单选题{{radio.length}}道，多选题{{check.length}}道，判断题{{judge.length}}道, 填空题{{fill.length}}道)</span>
        </div>
        <!--多选题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">多选题</span>
          </div>
          <div v-for="(checks, index) in check" class="tkj">
            <div class="subject">
              {{(index+1)}}. {{checks.content}}
            </div>
            <ul>
              <li v-for="checkss in checks.option">
                {{checkss}}
              </li>
              <li>
                您的答案：<span style="color: #F94B5C">{{checks.userAnswer}}</span> 正确答案：<span style="color: #3B50A1">{{checks.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{checks.answerAnalysis}}</span>
            </div>
            <div class="del" @click="del(checks.id,index,2)">
              删除
            </div>
          </div>
        </div>


      </div>
      <!--判断题-->
      <div v-if="show==4" class="answer_three">
        <div class="answer_three_header">
          共 {{radio.length+check.length+judge.length+fill.length}} 道题 <span>(其中单选题{{radio.length}}道，多选题{{check.length}}道，判断题{{judge.length}}道, 填空题{{fill.length}}道)</span>
        </div>

        <!--判断题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">判断题</span>
          </div>
          <div v-for="(judges, index) in judge" class="tkj">
            <div class="subject">
              {{(index+1) }}. {{judges.content}}
            </div>
            <ul>
              <li v-for="judgess in judges.option">
                {{judgess}}
              </li>

              <li>
                您的答案：<span style="color: #F94B5C">{{judges.userAnswer}}</span> 正确答案：<span style="color: #3B50A1">{{judges.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{judges.answerAnalysis}}</span>
            </div>
            <div class="del" @click="del(judges.id,index,3)">
              删除
            </div>
          </div>
        </div>
      </div>
        <!--填空题-->
        <div v-if="show==5" class="answer_three">
          <div class="answer_three_header">
            共 {{radio.length+check.length+judge.length+fill.length}} 道题 <span>(其中单选题{{radio.length}}道，多选题{{check.length}}道，判断题{{judge.length}}道, 填空题{{fill.length}}道)</span>
          </div>

          <!--填空题-->
          <div class="topic_ceshi">
            <div class="answer_three_tips">
              <span class="zi_lan">填空题</span>
            </div>
            <div v-for="(filles, index) in fill" class="tkj">
              <div class="subject">
                {{(index+1) }}. {{filles.content}}
              </div>
              <ul>
                <li>
                  您的答案：<span style="color: #F94B5C">{{filles.userAnswer}}</span> 正确答案：<span style="color: #3B50A1">{{filles.correctAnswer}}</span>          </li>
              </ul>
              <div class="answerAn">
                答案解析：<br/>
                <span>{{filles.answerAnalysis}}</span>
              </div>
              <div class="del" @click="del(filles.id,index,5)">
                删除
              </div>
            </div>
          </div>
        </div>




      <!--空白页-->
      <div v-if="show==0" class="answer_three" style="height: 500px">
     <div>
      <div style="margin:181px auto 0 auto;width: 160px;height: 163px;">
        <img src="../../assets/images/cuoti.png" height="163" width="160"/>
      </div>
      <div style="text-align: center;margin-top:18px;font-size: 18px;color: #3B50A1">
        您还没有错题记录，继续保持努力！
      </div>
     </div>
     </div>


    </div>

  </div>
</template>

<script>
  export default {

    data() {
      return {
        show:1,

        style1:'click',
        style2:'',
        style3:'',
        style4:'',
        style5:'',


        radio:[],//单选题
        check:[],//多选题
        judge:[],//判断题
        fill:[],//填空题
      }
    },
    methods: {
      style(e){//调节标题样式
        if(e==1){
          this.show=1;
          this.style1='click';
          this.style2='';
          this.style3='';
          this.style4='';
          this.style5='';
        }
        if(e==2){
          this.show=2;
          this.style1='';
          this.style2='click';
          this.style3='';
          this.style4='';
          this.style5='';
        }
        if(e==3){
          this.show=3;
          this.style1='';
          this.style2='';
          this.style3='click';
          this.style4='';
          this.style5='';
        }
        if(e==4){
          this.show=4;
          this.style1='';
          this.style2='';
          this.style3='';
          this.style4='click';
          this.style5='';
        }
        if(e==5){
          this.show=5;
          this.style1='';
          this.style2='';
          this.style3='';
          this.style4='';
          this.style5='click';

        }

      },
      del(id,index,type){//删除
        console.log(id);
        console.log(index);
        console.log(type);
        this.$axios({
          url: '/web/subject/wrongQuestion/delete/'+id,
          method: 'DELETE',
          data:{
          },
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          transformRequest: [function(data) {  //json
            data = JSON.stringify(data);
            return data
          }],
        }).then((response) => {
          console.log(response.data);
          if(response.data.msg=='success'){
            this.$Message.success('删除成功');
            if(type==1){ //删除单选数组
              this.radio.splice(index,1);
              this.$router.go(0);
            }
            if(type==2){ //删除多选数组
              this.check.splice(index,1);
              this.$router.go(0);
            }
            if(type==3){ //删除判断数组
              this.judge.splice(index,1);
              this.$router.go(0);
            }
            if(type==5){ //删除填空数组
              this.fill.splice(index,1);
              this.$router.go(0);
            }
          }else {
            this.$Message.success('删除失败');
          }
        }).catch((error) => {
          console.log("调取失败500");
          this.$Message.error('请求删除试题失败！')
          this.spinShow=false;
        });
      },
        all(){  //渲染题
          var userId =this.$cookies.get('pcexam_id');
          console.log(userId)
          this.$axios({
            url: '/web/personalCenter/wrongQuestionBank',
            method: 'POST',
            data:{
              userId:userId,
              type:4
            },
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            },
            transformRequest: [function(data) {  //json
              data = JSON.stringify(data);
              return data
            }],
          }).then((response) => {
            console.log(response.data);
              if(response.data.code==500){
                this.$Message.error('获取错题失败！');
              }else {
                for(var i=0;i<response.data.questions.length;i++){
//                  var strArr = response.data.questions[i].option.split("&&");

                  if(response.data.questions[i].type==1){//单选
                    var strArr=[];
                    if(response.data.questions[i].optionA==''||response.data.questions[i].optionA==null){

                    }else{
                      strArr.push("A、"+response.data.questions[i].optionA)
                    }
                    if(response.data.questions[i].optionB==''||response.data.questions[i].optionB==null){

                    }else{strArr.push("B、"+response.data.questions[i].optionB)}
                    if(response.data.questions[i].optionC==''||response.data.questions[i].optionC==null){

                    }else{strArr.push("C、"+response.data.questions[i].optionC)}
                    if(response.data.questions[i].optionD==''||response.data.questions[i].optionD==null){

                    }else{strArr.push("D、"+response.data.questions[i].optionD)}
                    if(response.data.questions[i].optionE==''||response.data.questions[i].optionE==null){

                    }else{strArr.push("E、"+response.data.questions[i].optionE)}

                    this.radio.push({
                        answerAnalysis:response.data.questions[i].answerAnalysis,//答案解析
                        content:response.data.questions[i].content,//题名
                        correctAnswer: response.data.questions[i].correctAnswer,//正确答案
                        id:response.data.questions[i].id,//题目id
                        option: strArr,//题选项
                        questionType:response.data.questions[i].type,//题型
                        userAnswer: response.data.questions[i].userAnswer,//用户答案
                      });
                  }
                  else if(response.data.questions[i].type==2){//多选
//                    var strArr = response.data.questions[i].option.split("&&");
                    var strArr=[];
                    if(response.data.questions[i].optionA==''||response.data.questions[i].optionA==null){

                    }else{strArr.push("A、"+response.data.questions[i].optionA)}
                    if(response.data.questions[i].optionB==''||response.data.questions[i].optionB==null){

                    }else{strArr.push("B、"+response.data.questions[i].optionB)}
                    if(response.data.questions[i].optionC==''||response.data.questions[i].optionC==null){

                    }else{strArr.push("C、"+response.data.questions[i].optionC)}
                    if(response.data.questions[i].optionD==''||response.data.questions[i].optionD==null){

                    }else{strArr.push("D、"+response.data.questions[i].optionD)}
                    if(response.data.questions[i].optionE==''||response.data.questions[i].optionE==null){

                    }else{strArr.push("D、"+response.data.questions[i].optionE)}

                    this.check.push({
                        answerAnalysis:response.data.questions[i].answerAnalysis,//答案解析
                      content:response.data.questions[i].content,//题名
                      correctAnswer: response.data.questions[i].correctAnswer,//正确答案
                      id:response.data.questions[i].id,//题目id
                      option: strArr,//题选项
                      questionType:response.data.questions[i].type,//题型
                      userAnswer: response.data.questions[i].userAnswer,//用户答案
                    });
                  }else if(response.data.questions[i].type==3){//判断
//                    var strArr = response.data.questions[i].option.split("&&");
                    var strArr=[];
                    if(response.data.questions[i].optionA==''||response.data.questions[i].optionA==null){

                    }else{strArr.push("A、"+response.data.questions[i].optionA)}
                    if(response.data.questions[i].optionB==''||response.data.questions[i].optionB==null){

                    }else{strArr.push("B、"+response.data.questions[i].optionB)}
                    if(response.data.questions[i].optionC==''||response.data.questions[i].optionC==null){

                    }else{strArr.push("C、"+response.data.questions[i].optionC)}
                    if(response.data.questions[i].optionD==''||response.data.questions[i].optionD==null){

                    }else{strArr.push("D、"+response.data.questions[i].optionD)}
                    if(response.data.questions[i].optionE==''||response.data.questions[i].optionE==null){

                    }else{strArr.push("E、"+response.data.questions[i].optionE)}

                    this.judge.push({
                        answerAnalysis:response.data.questions[i].answerAnalysis,//答案解析
                      content:response.data.questions[i].content,//题名
                      correctAnswer: response.data.questions[i].correctAnswer,//正确答案
                      id:response.data.questions[i].id,//题目id
                      option: strArr,//题选项
                      questionType:response.data.questions[i].type,//题型
                      userAnswer: response.data.questions[i].userAnswer,//用户答案
                    });
                  }else if(response.data.questions[i].type==5){//判断
//                    var strArr = response.data.questions[i].option.split("&&");
                    var strArr=[];
                    if(response.data.questions[i].optionA==''||response.data.questions[i].optionA==null){

                    }else{strArr.push("A、"+response.data.questions[i].optionA)}
                    if(response.data.questions[i].optionB==''||response.data.questions[i].optionB==null){

                    }else{strArr.push("B、"+response.data.questions[i].optionB)}
                    if(response.data.questions[i].optionC==''||response.data.questions[i].optionC==null){

                    }else{strArr.push("C、"+response.data.questions[i].optionC)}
                    if(response.data.questions[i].optionD==''||response.data.questions[i].optionD==null){

                    }else{strArr.push("D、"+response.data.questions[i].optionD)}
                    if(response.data.questions[i].optionE==''||response.data.questions[i].optionE==null){

                    }else{strArr.push("E、"+response.data.questions[i].optionE)}

                    this.fill.push({
                      answerAnalysis:response.data.questions[i].answerAnalysis,//答案解析
                      content:response.data.questions[i].content,//题名
                      correctAnswer: response.data.questions[i].correctAnswer,//正确答案
                      id:response.data.questions[i].id,//题目id
                      option: strArr,//题选项
                      questionType:response.data.questions[i].type,//题型
                      userAnswer: response.data.questions[i].userAnswer,//用户答案
                    });
                  }
                }
 //               //空数据的话
                if(this.radio.length==0&&this.check.length==0&&this.judge.length==0&&this.fill.length==0){
                  this.show=0
                }else{
                  this.show=1
                }
              }
          }).catch((error) => {
            console.log("调取失败500");
            this.$Message.error('请求试题失败！')
            this.spinShow=false;
          });
        }
    },
    mounted:function() {
      this.all();//获取错题


    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  ul li{
    list-style: none;
    line-height:40px;
    cursor: pointer;
  }
  .content{
    /*padding-top: 100px;*/
  }
  .tag{
    z-index: 1;
    margin-top: 20px;
    width: 100%;
    height:60px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 11px 0px rgba(4,0,0,0.1);
  }
  .tag_zhong{
    width: 1079px;
    margin: auto;
  }
  .tag_zhong div{
    width:120px;
    height: 100%;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
  }
  .click{
    background: #3B50A1;
    color: white;
  }
  .answer_three{
    width: 1079px;
    margin: auto;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 11px 0px rgba(4,0,0,0.1);
    border-radius:1px;
    padding: 18px;
    margin-top: 26px;
  }
  .answer_three_header{
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #BDBDBD;
    position: relative;
    font-size:18px;
    line-height: 70px;
    color:rgba(51,51,51,1);
  }
  .answer_three_header span{
    color: #999999;
  }
  .zi_lan{
    color: #3B50A1;
  }
  .answer_three_tips{
    color: #999999;
    margin: 30px 0 35px 0;
  }
  .subject{
    line-height:30px;
    font-size: 16px;
    margin-bottom: 24px;
  }
  .tkj{
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px  dashed  #E7E7E7;
    position: relative;
  }
  .del{
    cursor: pointer;
    position: absolute;
    right: 21px;
    bottom: 21px;
    text-align: center;
    line-height: 30px;
    width:90px;
    height:30px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(59,80,161,1);
    border-radius:15px;
  }
  .del:hover{
    background:rgba(59,80,161,1) ;
    color: white;
  }
  .answerAn{
    font-size: 16px;
  }
</style>
